<template>
    <div :class="articleContent.articlewrap">
      <article>
        <h1 class="text-center">{{content.title}}</h1>
        <div class="text-right">
          <span :class="articleContent.time">{{content.date | time}}</span>
          <span :class="articleContent.source">{{content.source}}</span>
        </div>
        <div :class="articleContent.content">
          <div v-html="jsonData"></div>
        </div>
      </article>
    </div>
</template>

<script>
import request from '../../api/request'
import axios from 'axios'
export default {
  name: "articlePage",
  data () {
    return {
      content:'',
      jsonData: ''
    }
  },
  created () {
    let id = this.$route.params.id
    request.get('articleContent', {id: id}).then((response) => {
      if (response.data.code === '200') {
        this.content = response.data.data.content
        axios.get(response.data.data.content.target).then((responseJson) => {
          this.jsonData = responseJson.data.html
        })
      }
    })
  }
}
</script>

<style lang="scss" module="articleContent">
  .articlewrap{
    padding:40px;
    h1{
      font-weight: normal;
      font-size:50px;
      color:#33383e;
    }
    .time,.source{
      display: inline-block;
      color:#aaa;
      font-size:24px;
    }
    .time{
      margin-right:10px;
    }
    .content{
      color: #878787;
      font-size: 24px;
      line-height: 40px;
      margin-top:40px;
      img{
        max-width: 100%;
        display: block;
        margin:0 auto;
      }
      p{
        margin-bottom:10px;
      }
    }
  }
</style>
